﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jQuery工具函数-jQuery实践</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="res/css/bootstrap.min.css" rel="stylesheet"/>
<link href="res/css/zico.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>   
<script src="res/js/popper.min.js"></script>
<script src="res/js/bootstrap.min.js"></script>
<style>
img{width:100%;}
.odd{background: #f00;}
.even{background:#ccc;}
</style>
</head>
<body>
<div class="container-xl a1">
<h1>jQuery工具函数</h1>
<div id="a1"></div>


</div>






<script>
    $(document).ready(function () {
        let books= {"PHP类图书":"《PHP必须知道的300个问题》","Java类图书":"《学通Java的24堂课》","JavaScript类图书":"《JavaScript入门经典》"}; 
        let li_abc=`<li><span>分类</span><span>书名</span></li>`;
        $.each(books,function (type,name) {
            li_abc+=`<li>`+type+`            `+name+`</li>`;
        })
        $(`#a1`).append(li_abc);
    })



</script>
</body>
</html>
